<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/01.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="content">
        <div id="list">
            <div style="background-image: url(images/-7b316830fa3fbf85.jpg); background-size: 100% 100%;"></div>
            <div style="background-image: url(images/11a99d0bf5f22dd7.jpg); background-size: 100% 100%;">
                <a href="https://zmy1005.gitee.io/personal_homepage" target="blank"><img src="images/76b65fb32900a4bc.jpg" alt=""></a>
                <h1 style="color: rgb(255, 74, 104);">朱梦圆</h1>
                <p style="color: rgb(255, 74, 104);">与其等待他人渡我，不如自己泛舟</p>
            </div>
            <div style="background:url(images/img12.jpg) center center no-repeat; background-size: cover; ">
                <a href="https://xianyepudding.gitee.io/mypage17" target="blank"><img src="images/头像.jpg" alt=""></a>
                <h1 style="color: #d9fdd6;">张阳吟</h1>
                <p style="color: #d9fdd6;">夕阳落下的天际，朝霞也终会升起</p>
            </div>
            <div style="background-image: url(images/background.jpg); background-size: 100% 100%; ">
                <a href="https://wenshuangshi.gitee.io/git-shuangzipage" target="blank"><img src="images/sws.jpg" alt=""></a>
                <h1 style="color: wheat;">施文爽</h1>
                <p style="color: wheat;">既会有失败，也会得到可贵的东西</p>
            </div>
            <div style="background-image: url(images/back.jpg); background-size: 100% 100%;">
                <a href="https://aoyixixi.gitee.io/miyo" target="blank"><img src="images/wu.png" alt=""></a>
                <h1>吴子娟</h1>
                <p>向这太阳努力冲，抓住心中这一抹橙色</p>
            </div>
            
            <div style="background-image: url(images/封面.jpeg); background-size: 100% 100%;">
                <a href="https://yanjiani.gitee.io/wangye" target="blank"><img src="images/7045d11e9a85f736.jpg" alt=""></a>
                <h1 style="color: midnightblue;">鄢佳霓</h1>
                <p style="color: midnightblue;">大自然的每一个领域都是美妙绝伦的</p>
            </div>
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        $(function(){
            var index=0;
            $("#next").click(function(){
                index++;
                if (index>5)
                {
                    index=0;
                }
                console.log(index);
                $("#list div").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                
            })
            $("#prev").click(function(){
                index--;
                console.log(index);
                if(index<0){
                    index=5;
                }
                $("#list div").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                
            })
            $("#btns span").click(function(){
                let i = $(this).index();
                console.log(i);
                index = i;
                $("#list div").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                
            })
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 4000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>
</body>
</html>